<template>
	<div class="Introduction">
		<image class="image" :src="responseData.userImg"></image>
		<p class="font">姓名:{{ responseData.userName }}</p>
		<p class="uid">uid:{{ responseData.id }}</p>
		<p class="Member">{{ responseData.member>0? '黄金会员':'普通会员' }}</p>
		<div class="openMember">开通会员</div>
	</div>
	<div class="Details">
		<div class="orderForm">
			订单管理
		</div>
		<div class="triangle"></div>
	</div>
	<div class="Details" @click="toMyCourse">
		<div class="orderForm">
			我的课程
		</div>
		<div class="triangle"></div>
	</div>
	<div class="Details" @click="toProfileInfo">
		<div class="orderForm">
			账号安全
		</div>
		<div class="triangle"></div>
	</div>
	<div class="Details">
		<div class="orderForm">
			服务中心
		</div>
		<div class="triangle"></div>
	</div>
	<div class="Details">
		<div class="orderForm">
			更多功能
		</div>
		<div class="triangle"></div>
	</div>
	<div class="Details">
		<div class="orderForm">
			设置中心
		</div>
		<div class="triangle"></div>
	</div>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	// 定义响应式数据
	const responseData = ref({
		userImg: '',
		userName: '',
		id: '',
		member: ''
	});

	// 定义请求方法
	const fetchFromServer = async () => {
		try {
			const res = await uni.request({
				url: 'http://localhost:8000/user/10000', // 替换成你的后端接口地址
				method: 'GET', // 或者 'POST'
				data: {}, // 如果是POST请求，这里可以添加要发送的数据
				success: (res) => {
					responseData.value = res.data.data; // 将响应数据保存到响应式数据中
				},
				fail: (err) => {
					console.error('请求失败', err);
				}
			});
		} catch (error) {
			console.error('请求异常', error);
		}
	};

	// 页面显示时调用请求方法
	onShow(() => {
		fetchFromServer();
	});

	function toProfileInfo() {
		uni.navigateTo({
			url: '/pages/My/ProfileInfo'
		});
	}

	function toMyCourse() {
		uni.navigateTo({
			url: '/pages/My/MyCourse'
		});
	}
</script>

<style scoped>
	.Introduction {
		background-color: #0066ff;
		width: 100%;
		opacity: 0.8;
		height: 180px;
		display: flex;
	}

	.image {
		border-radius: 50%;
		background-color: #ffffff;
		height: 100px;
		width: 100px;
		margin-left: 36px;
		margin-top: 40px;
	}

	.font {
		font-weight: bold;
		margin-left: 30px;
		opacity: 1;
		margin-top: 50px;
	}

	.uid {
		opacity: 1;
		font-weight: bold;
		margin-left: -37px;
		margin-top: 100px;
	}

	.Member {
		font-weight: bold;
		font-size: 25px;
		margin-top: 20px;
		margin-left: 20px;
		color: #ffffff;
	}

	.openMember {
		border: 1px solid #707070;
		background-color: #ffffff;
		border-radius: 10px;
		height: 30px;
		width: 80px;
		margin-top: 90px;
		margin-left: -80px;
		font-size: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
	}

	.Details {
		border: 1px solid #707070;
		background-color: #ffffff;
		height: 60px;
		width: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;
		padding-left: 50px;
	}

	.triangle {
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 15px solid black;
		margin-left: 250px;
	}
</style>